<template>
	<view class="">
		<view class="topBox">
			<view class="" :style="'height:'+statusBarHeight+'px'"></view>
			<view class="stautsBarTitle" :style="'line-height:'+statusBarTitleHeight+'px'">登录</view>
		</view>
		<view class="bannerBox">
			<image class="banner" src="/static/banner.png" mode=""></image>
			<view class="changeBox">
				<view class="changeButtonBox changeButtonBoxOn">
					<view class="changeButtonTitle">
						登录
					</view>
					<view class="changeButtonLine"></view>
				</view>
			</view>
		</view>
		<view class="inputBox">
			<view class="inputBoxIconBox">
				<image class="inputIcon1" src="/static/phoneNumberIcon.png" mode=""></image>
			</view>
			<input placeholder-class="placeholder" class="inp" type="number" v-model="phone"   placeholder="请输入您的手机号" />
		</view>
		<view class="inputBox inputBox2">
			<view class="inputBoxIconBox">
				<image class="inputIcon1" src="/static/passwardIcon.png" mode=""></image>
			</view>
			<input placeholder-class="placeholder" class="inp" type="password" v-model="password" placeholder="请输入您的登录密码" />
		</view>
		<view class="loginButton" @click="login">立即登录</view>
		<image src="/static/phone.png" class="rightBanner" mode=""></image>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				statusBarHeight:0,
				statusBarTitleHeight:0,
				phone:'',
				password:''
			}
		},
		onLoad() {
			this.computedTitleHeight()
		},
		methods:{
			async login(){
				let reg =/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
				if(!reg.test(this.phone)){
					uni.showToast({
						title: '请输入正确手机号',
						duration:2000,
						icon:'none'
					});
					return
				}
				if(this.password == ''){
					uni.showToast({
						title: '密码不能为空',
						duration:2000,
						icon:'none'
					});
					return
				}
				let res = await this.$post('/app/user/login',{
					tel:this.phone,
					appId:this.password
				})
				if(res.code == 200){
					uni.setStorageSync('token',res.msg)
					let user = await this.$get('/app/user/getLoginUser?token='+res.msg,{})
					if(user.code == 200){
						console.log(res,user)
						uni.setStorageSync('token',res.msg)
						uni.setStorageSync('user',user.data)
						uni.redirectTo({
							url: '/pages/index/index'
						});
					} else {
						
					}
				} else {
					uni.showModal({
						content: res.msg,
						showCancel: false,
						confirmText: '确定'
					});
				}
			},
			computedTitleHeight(){
				let statusBarHeight =uni.getSystemInfoSync().statusBarHeight
				this.statusBarHeight = statusBarHeight
				let menuTop = uni.getMenuButtonBoundingClientRect().top
				let menuHeight = uni.getMenuButtonBoundingClientRect().height
				this.statusBarTitleHeight = (menuTop - statusBarHeight)*2+menuHeight
			}
		}
	}
</script>

<style scoped>
	.topBox{
		position: fixed;
		top: 0;
		left: 0;
		width: 750rpx;
	}
	.stautsBarTitle{
		text-align: center;
		font-size: 32rpx;
		color: white;
	}
	.bannerBox{
		position:relative;
	}
	.banner{
		width: 750rpx;
		height: 437rpx;
	}
	.changeBox{
		height:137rpx;
		width: 710rpx;
		padding-left: 36rpx;
		display: flex;
		position:absolute;
		left: 20rpx;
		bottom:0;
		border-radius: 20rpx  20rpx 0 0;
		background:white;
		
	}
	.changeButtonBox{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 130rpx;
	}
	.changeButtonTitle{
		font-size:28rpx;
	}
	.changeButtonLine{
		width: 25rpx;
		height: 6rpx;
		margin-top:20rpx;
	}
	.changeButtonBoxOn .changeButtonTitle{
		color: #e64545;
		font-size: 32rpx;
	}
	.changeButtonBoxOn .changeButtonLine{
		background: #e64545;
	}
	.inputBox{
		display: flex;
		align-items: center;
		height:90rpx;
		background-color: #fef3f3;
		border-radius:45rpx;
		width:638rpx;
		margin:0 auto;
		margin-top:25rpx;
	}
	.inputBox2{
		margin-top:62rpx;
	}
	.inputBoxIconBox{
		width: 90rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.inputIcon1{
		width:32rpx;
		height:40rpx;
	}
	.inputIcon2{
		width:28rpx;
		height:36rpx;
	}
	.inp{
		flex:1;
		font-size:28rpx;
		color:#f96564;
	}
	.placeholder{
		color:#f96564;
	}
	.loginButton{
		width:638rpx;
		margin:0 auto;
		margin-top:100rpx;
		border-radius: 45rpx;
		line-height: 90rpx;
		color: white;
		background-color: #f85453;
		text-align: center;
	}
	.rightBanner{
		width: 465rpx;
		height: 333rpx;
		position: fixed;
		top: 89rpx;
		right: 0;
	}
</style>
